<template>
  <div class="pay-way-container">
    <van-radio-group :value="payWay" class="pay-way-wrapper">
      <van-cell-group inset>
        <div
          v-for="item in wayList"
          :key="item.pay_way"
          @click="changePayWay(item)"
          class="pay-cell"
          :class="{'disabled': item.disabled}"
        >
          <van-cell clickable>
            <template #title>
              <div class="custom-title">
                <img :src="appIcon(item.name)" class="app-icon"/>
                <span type="danger">{{ languageForPayWay(item.name) }}</span>
                <template v-if="isHuabei(item.pay_way)">
                  <span class="installment-tag" v-if="maxInterestFree">{{ maxInterestFree }}</span>
                </template>
              </div>
            </template>
            <template #right-icon>
              <van-radio :name="item.pay_way" :disabled="item.disabled"/>
            </template>
          </van-cell>
          <span class="pay-way-tips" v-if="item.tips">{{ item.tips }}</span>
          <div class="stages-wrapper" v-if="isHuabei(item.pay_way) && showInstallMent">
            <div
              class="stages"
              :class="{'stages-active': installment === stages.installment  && payWay === 14}"
              @click="selectStages(stages)"
              v-for="stages in huaBeiInstallment"
              :key="stages.installment"
            >
              <div
                style="font-size: 0.28rem;font-weight: 500;width: fit-content;min-width: 2.8rem;"
                class="font-color-stages"
              >¥{{ stages.repayment_amount_average | fixedPrice }} x {{ stages.installment }}{{t('confirmOrder_mths')}}
              </div>
              <div
                style="font-size: 0.24rem;width: fit-content;min-width: 2.8rem;"
                class="font-color-stages"
              >
                <template v-if="stages.is_interest_free">{{t('confirmOrder_interest_free_price')}}</template>
                <template v-else>{{t('confirmOrder_interest')}} ¥{{ stages.service_fee_average | fixedPrice }}/{{t('confirmOrder_mths')}}</template>
              </div>
            </div>
          </div>
        </div>
      </van-cell-group>
    </van-radio-group>
  </div>
</template>
<script>
import { RadioGroup, Radio, Cell, CellGroup} from "vant";
import {appIconKeyMap} from "./iconBase64";
import locale from "../../../../mixins/locale"

export default {
  name: "payWay",
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  mixins: [locale],
  props: {
    payWay: {
      type: Number,
      default: 0
    },
    ways: {
      type: Array,
      default: () => {
        return [{name: "微信支付", pay_way: 6}];
      },
    },
    huaBeiInstallment: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      installment: 3,
    };
  },
  computed: {
    payWayComputed: {
      get() {
        return this.payWay
      },
      set(val) {
        this.$emit('update:payWay', val)
      }
    },
    huabeiParams() {
      if (
        Array.isArray(this.huaBeiInstallment) &&
        this.huaBeiInstallment.length
      ) {
        const stage = this.huaBeiInstallment.filter((item) => {
          return item.installment === this.installment;
        })[0];
        const { installment, is_interest_free, installment_activity } = stage;
        return {
          installment,
          isInterestFree: is_interest_free,
          installmentActivity: installment_activity,
        };
      } else {
        return {};
      }
    },
    wayList() {
      return this.ways.map((item) => {
        item.disabled = item.pay_enable === 2;
        item.tips =
          item.pay_way === 14 && item.disabled
            ? this.t('confirmOrder_huabei_pay_tips')
            : "";
        return item;
      });
    },
    showInstallMent() {
      return this.interestFreeList.length || this.payWay === 14;
    },
    interestFreeList() {
      return (
        (Array.isArray(this.huaBeiInstallment) &&
          this.huaBeiInstallment.filter((item) => {
            return item.is_interest_free;
          })) ||
        []
      );
    },
    maxInterestFree() {
      if (this.interestFreeList.length === this.huaBeiInstallment.length) {
        return this.t("confirmOrder_interest_free");
      }
      console.log(123,this.interestFreeList[this.interestFreeList.length - 1]);
      const period =
        this.interestFreeList[this.interestFreeList.length - 1]?.installment
      return this.interestFreeList.length
        ? this.t("confirmOrder_huabei_period", { period })
        : "";
    },
  },
  filters: {
    fixedPrice(val) {
      return (Number(val) / 100).toFixed(2);
    },
  },
  methods: {
    languageForPayWay(key) {
      let keyMap = {
        微信支付: this.t("confirmOrder_wechat_pay"),
        支付宝: this.t("confirmOrder_ali_pay"),
        花呗分期: this.t("confirmOrder_huabei_pay"),
        PayPal: 'PayPal',
      };
      return keyMap[key];
    },
    changePayWay(item) {
      const { pay_way, disabled } = item;
      if (disabled) return;
      this.payWayComputed = pay_way;
      if (item.pay_way === 14){
        this.$emit('changePayWayHuabei', this.huabeiParams);
      }
    },
    appIcon(key) {
      return appIconKeyMap[key];
    },
    isHuabei(val) {
      return val === 14;
    },
    selectStages(stage) {
      const { installment } = stage;
      this.installment = installment;
      this.$emit('changePayWayHuabei', this.huabeiParams);

    },
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/styles/global.scss";
@import "../../assets/styles/common.scss";

.stages-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
  padding-top: 0.01rem;
  margin: 0 0.32rem;
  .stages {
    border-radius: 0.08rem;
    background: #f5f5f5;
    width: fit-content;
    height: fit-content;
    margin-bottom: 0.16rem;
    padding: 0.16rem 0;
    .font-color-stages{
      color: #333;
    }
  }
  .stages-active {
    outline: 0.01rem solid #1472ff;
    background: #ebf3ff;
    .font-color-stages{
      color: #1472FF;
    }
  }
}

.pay-way-container {
  width: 100%;
  .pay-way-wrapper {
    background: #fff;
    font-size: 0.28rem;

    .pay-cell {
      .van-cell {
        &:after {
          display: none;
        }
      }
      &:not(:last-child) {
        .van-cell {
          border-bottom: solid 0.5px #cccccc;
        }
      }
    }
    .disabled {
      .van-cell {
        opacity: 0.4;
      }
      .stages-wrapper {
        opacity: 0.4;
      }
    }

    .van-cell {
      padding: 0.28rem 0;
      font-size: 0.28rem;
      font-weight: 400;
      height: 1.12rem;
      overflow: visible;
      border-radius: 0.16rem 0 0;
      margin: 0 0.32rem;
      width: auto;

      .van-radio {
        overflow: visible;
      }
    }

    .van-cell-group--inset {
      overflow: visible;
    }

    .van-cell-group {
      margin: 0;
      border-radius: 0.16rem;
      &::after {
        display: none;
      }
    }

    .custom-title {
      display: flex;
      align-items: center;

      .app-icon {
        width: 0.48rem;
        height: 0.48rem;
        margin-right: 0.16rem;
      }

      .installment-tag {
        width: 0.98rem;
        height: 0.32rem;
        display: inline-block;
        margin-left: 0.16rem;
        color: #ff781f;
        background: #fff3eb;
        font-size: 0.2rem;
        line-height: 0.32rem;
        text-align: center;
        border-radius: 0.04rem;
        font-weight: 500;
      }
    }
  }
}
.pay-way-tips {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 0.32rem;
  line-height: 0.32rem;
  padding: 0.08rem 0.24rem;
  border-radius: 0.08rem;
  color: #000;
  font-size: 0.24rem;
  font-weight: 400;
  opacity: 1 !important;
  text-wrap: wrap;
  background: #f5f5f5;
  margin: 0 0.28rem 0;
}
</style>